/**
 * 用户菜单 个人详情页面
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>个人详情页面</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 个人详情信息 -->
    <div class="personaldetails">
        <el-avatar shape="circle" :size="200"  :src="userinfo.portrait"></el-avatar>
        <div class="personaldetails_text">
            <div class="personaldetails_text_detail">用户序号：
                <span>{{userinfo.id}}</span>
            </div>
            <div class="personaldetails_text_detail">用户昵称：
                <span>{{userinfo.name}}</span>
            </div>
            <div class="personaldetails_text_detail">个性签名：
                <span>{{userinfo.signature}}</span>
            </div>
            <div class="personaldetails_text_detail">用户手机号：
                <span>{{userinfo.phone_number}}</span>
            </div>
            <div class="personaldetails_text_detail">用户级别：
                <span>{{userinfo.authority}}</span>
            </div>
            <div class="personaldetails_text_detail">用户工作：
                <span>{{userinfo.job}}</span>
            </div>
        </div>
    </div>
    <!-- 参与活动列表 -->
    
    <el-table size="small" :data="participatedActList" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;" class="partActivity">
        <el-table-column align="center" type="selection" width="60">
        </el-table-column>
        <el-table-column sortable prop="act__id" label="参与活动序号" width="130">
        </el-table-column>
        <el-table-column sortable prop="act__image" label="图片" width="100">
            <template slot-scope="scope">
              <el-image :src="scope.row.act__image"></el-image>
            </template>
          </el-table-column>
        <el-table-column sortable prop="act__locate_name" label="活动昵称" width="200">
        </el-table-column>
        <el-table-column sortable prop="act__name" label="活动标签" width="200">
        </el-table-column>      
    </el-table>
    <!-- 发起活动列表 -->
    
    <el-table size="small" :data="originatedActList" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;" class="partActivity">
        <el-table-column align="center" type="selection" width="60">
        </el-table-column>
        <el-table-column sortable prop="id" label="发起活动序号" width="130">
        </el-table-column>
        <el-table-column sortable prop="act__image" label="图片" width="100">
            <template slot-scope="scope">
              <el-image :src="scope.row.act__image"></el-image>
            </template>
          </el-table-column>
        <el-table-column sortable prop="act__locate_name" label="活动昵称" width="200">
        </el-table-column>
        <el-table-column sortable prop="act__name" label="活动昵称" width="200">
        </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getUserById,getParticipatedAct,getOriginatedAct } from "../../api/basisMG"
export default {
    data(){
        return {
            loading:false,
            userinfo:{
                userID:1,
            },
            information:{
                userID:1
            },
            participatedActList:[],
            originatedActList:[],
            listdata:[

            ],
            

        }
    },
  // 注册组件
  components: {
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    console.log(this.$route)
    this.userinfo.userID = this.$route.query.userId
    this.information.userID = this.userinfo.userID
    console.log(this.userinfo)
    this.getdata(this.userinfo)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
   methods: {
        getdata(userinfo){
            getParticipatedAct(this.information)
            .then(res=>{
                console.log(res)
                this.participatedActList = res.data
            })
            getOriginatedAct(this.information)
            .then(res=>{
                console.log(res)
                this.originatedActList = res.data
            })
            getUserById(userinfo)
            .then(res=>{
                console.log(res)
                this.userinfo = res.data
            }).catch(res=>{
                this.$message({
                type: 'info',
                message: res.data
            })
            })
        }
    }
}
</script>

<style scoped>
.personaldetails{
    display: flex;
    float: left;
    width: 100%;
}
.personaldetails_text{
    width: 40%;
    margin-left: 10%;
}
.personaldetails_text_detail{
    margin-top: 5%;
}

</style>

 
 
